<template>
  <popup-detail-dialog ref="refPopupDetailDialog">
    <!-- 标题 -->
    <template #PopupDialogTitle>
      <span>{{ currentPopupData.baseData.newCellName }}</span>
    </template>
    <!-- 内容 -->
    <template #popupDialogContainer>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <!-- 基本信息 -->
        <el-tab-pane label="基本信息" name="base">
          <el-descriptions
            class="margin-top"
            :title="`cgi: ${currentPopupData.baseData.cgi}`"
            :column="3"
            border
          >
            <el-descriptions-item>
              <template #label>
                <span class="cell-item"> 省市区 </span>
              </template>
              <span
                >{{ currentPopupData.baseData.province
                }}{{ currentPopupData.baseData.city }}市{{
                  currentPopupData.baseData.county
                }}</span
              >
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <span class="cell-item"> 站点名称 </span>
              </template>
              <span>{{ currentPopupData.baseData.stationName }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <span class="cell-item"> 基站类型 </span>
              </template>
              <span>{{ currentPopupData.baseData.coverType }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <span class="cell-item"> 站号 </span>
              </template>
              <span>{{ currentPopupData.baseData.stationNo }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <span class="cell-item"> 频段 </span>
              </template>
              <span>{{ currentPopupData.baseData.workFrequency }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <span class="cell-item"> 经纬度 </span>
              </template>
              <span
                >[{{
                  currentPopupData.baseData.longitude.toFixed(positionFix)
                }},
                {{
                  currentPopupData.baseData.latitude.toFixed(positionFix)
                }}]</span
              >
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <span class="cell-item"> 小区生命周期状态 </span>
              </template>
              <span>{{ currentPopupData.baseData.cellLifeStatus }}</span>
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>

        <!-- 健康度信息 -->
        <el-tab-pane label="健康度信息" name="health" class="health_wrap">
          <!-- :disabled-date="disabledDate" -->
          <el-date-picker
            class="health_time"
            v-model="insertTime"
            type="date"
            placeholder="请选择时间"
            :shortcuts="shortcuts"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            size="small"
            @change="getHealthByTime"
          />

          <div class="health_txt" v-if="isShowHealth">
            <b>{{ currentPopupData.healthDataData.total }}</b>
            <el-descriptions class="margin-top" :column="1" border>
              <el-descriptions-item>
                <template #label>
                  <span class="cell-item"> 机房环境 </span>
                </template>
                <span>{{ currentPopupData.healthDataData.env }}</span>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <span class="cell-item"> 价值收益 </span>
                </template>
                <span>{{ currentPopupData.healthDataData.profit }}</span>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <span class="cell-item"> 用户感知 </span>
                </template>
                <span>{{ currentPopupData.healthDataData.perception }}</span>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <span class="cell-item"> 网络质量 </span>
                </template>
                <span>{{ currentPopupData.healthDataData.quality }}</span>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <span class="cell-item"> 告警故障 </span>
                </template>
                <span>{{ currentPopupData.healthDataData.alarm }}</span>
              </el-descriptions-item>
            </el-descriptions>
          </div>
          <div class="health_chart">
            <health-chart
              class="chart_cot"
              ref="refHealthChart"
              :width="'80%'"
              :height="'80%'"
              :chart-data="healthChartData"
              v-if="isShowHealth"
            />
          </div>
        </el-tab-pane>
      </el-tabs>
    </template>

    <!-- 按钮扩展 -->
    <template #extendBtn>
      <el-button v-show="isShowHealth" type="primary" @click="linkToDetail"
        >查看详情</el-button
      >
    </template>
  </popup-detail-dialog>
</template>

<script setup>
import { ref, nextTick } from "vue";
import PopupDetailDialog from "@/components/OpenlayerBaseMap/components/popup/PopupDetailDialog.vue";
// 组件
import HealthChart from "../chart/HealthChart.vue";
// 工具
import { useRouter /* useRoute */ } from "vue-router";
// api相关 - 工具
import { apiCommon, getDateTimeNowFormate } from "@/utils/index.js";
import * as gisApi from "@/api/gis/gis";

const router = useRouter();
const { proxy } = getCurrentInstance();

const refPopupDetailDialog = ref(null);

const refHealthChart = ref(null);
const healthChartData = ref({
  dataMax: [
    {
      name: "基站环境",
      max: 100,
    },
    {
      name: "故障告警",
      max: 100,
    },
    {
      name: "站点价值",
      max: 100,
    },
    {
      name: "用户感知",
      max: 100,
    },
    {
      name: "网络质量",
      max: 100,
    },
  ],
  score: [0, 0, 0, 0, 0],
});

// 当前气泡弹出框信息
const currentPopupData = ref({
  baseData: null, // 基本信息
  healthDataData: null, // 健康度信息
});
const positionFix = ref(3);

let isShowHealth = ref(false);
let activeName = ref("base");

/**
 * 工具
 */
// 日期控件
let insertTime = ref(getDateTimeNowFormate("timePicker"));
const shortcuts = [
  {
    text: "Today",
    value: new Date(),
  },
  {
    text: "Yesterday",
    value: () => {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24);
      return date;
    },
  },
  {
    text: "A week ago",
    value: () => {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
      return date;
    },
  },
];
/* const disabledDate = (time) => {
  return time.getTime() > Date.now();
}; */

// 初始化图表
const resetEcharts = () => {
  setTimeout(() => {
    isShowHealth.value = true;
    nextTick(() => {
      refHealthChart.value.resetChart();
    });
  }, 0);
};

/**
 * 业务
 */
const show = (val) => {
  // console.log(val);
  refPopupDetailDialog.value.show();

  activeName.value = "base";

  currentPopupData.value.baseData = val; // 基本信息数据
  getHealthData(); // 健康度数据
};

// 获取健康度图表数据
const getHealthData = async () => {
  const { cgi } = currentPopupData.value.baseData;

  // 获取接口数据接口
  let params = {
    cgi,
    insertTime: insertTime.value,
  };
  let stationSummary = await apiCommon(gisApi.queryStationSummary, params);
  // console.log(stationSummary);

  if (!stationSummary.data) {
    proxy.$modal.msgWarning(`${insertTime.value}没有健康度数据`);
    currentPopupData.value.healthDataData = {};
    // 图表赋值
    healthChartData.value.score = [0, 0, 0, 0, 0];

    return;
  }

  currentPopupData.value.healthDataData = stationSummary.data;

  getHealthChartData(); // 获取健康度图表数据
};

// 获取健康度图表数据
const getHealthChartData = () => {
  const { env, alarm, profit, perception, quality } =
    currentPopupData.value.healthDataData;

  // 图表赋值
  healthChartData.value.score = [env, alarm, profit, perception, quality];
};

// 选项卡
const handleClick = (tab) => {
  const { name } = tab.props;

  isShowHealth.value = false;

  // 点击健康度 - 初始化图表
  if (name === "health") {
    resetEcharts(); // 初始化图表
  }
};

// 根据时间搜索
const getHealthByTime = () => {
  getHealthData(); // 健康度数据
  resetEcharts(); // 初始化图表
};

// 查看详情
const linkToDetail = () => {
  const { cgi } = currentPopupData.value.baseData;
  // insertTime.value
  router.push({
    path: "/health/stationHealthDetail",
    query: { cgi, insertTime: insertTime.value },
  });
};

defineExpose({
  show,
});
</script>

<style lang="scss" scoped>
.health_wrap {
  position: relative;
  display: flex;
  justify-content: space-around;
  padding-top: 35px;

  :deep .health_time {
    position: absolute;
    top: 0;
    left: 0;
  }

  .health_txt {
    width: 35%;

    b {
      position: relative;
      display: block;
      text-align: center;
      margin-bottom: 10px;
      font-size: 28px;
      color: #000;

      &::before {
        content: "";
        position: absolute;
        margin-left: -29px;
        top: 50%;
        transform: translateY(-50%);
        width: 23px;
        height: 23px;
        background: url("../../icon/tongji.svg") top no-repeat;
        background-size: 100% 100%;
      }
    }
  }

  .health_chart {
    flex: 1;
    position: relative;

    .chart_cot {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
</style>
